import React,{ Component } from 'react'
import {WeaTransfer, WeaInputSearch, WeaFormItem, WeaDialog, WeaTools} from 'ecCom'
import {Button, Modal, message,Spin} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import { inject, observer} from 'mobx-react';
import {toJS} from 'mobx';

@inject('orderBySetStore',"wfListDoingStore")
@observer
export default class MyDefault extends Component {
    constructor (props) {
        super(props)
    }

    componentWillMount() {
        const {orderBySetStore,dataKey} = this.props;
        orderBySetStore.init({dataKey:dataKey});
    }

    /**
     * 左侧数据快捷搜索数据过滤
     * @param items
     * @returns {*}
     */
    filterLeft = (items) => {
        const {orderBySetStore} = this.props;
        const {leftvalue} = orderBySetStore;
        if (leftvalue) {
            items = items.filter(item=> item.name.indexOf(leftvalue) >= 0);//filter过滤数据
        }
        return items
    }

    /**
     * 快捷搜索右侧数据过滤
     * @param items
     * @returns {*}
     */
    filterRight = (items) =>{
        const {orderBySetStore} = this.props;
        const {rightvalue} = orderBySetStore;
        if (rightvalue) {
            items = items.filter(item=> item.name.indexOf(rightvalue) >= 0);//filter过滤数据
        }
        return items;
    }

    /**
     * 数据渲染
     * @param item
     * @returns {*}
     */
    renderItem = (item) => {
        const {orderBySetStore} = this.props;
        const {selectedKeys} = orderBySetStore;
        let sldk = toJS(selectedKeys);
        let orderTypeComp = <div></div>;
        if (sldk.indexOf(item.id) != -1) {//是否是右侧选中值
            orderTypeComp = (
                <span style={{float: 'right', cursor: 'pointer', marginRight: "15px"}} onClick={e => this.fnClickOrderType(e, item)} onDoubleClick={e =>this.fnStopPropagation(e)}>
                    {item.orderType != '1' ? getLabel(21604,'倒序') : getLabel(21605,'正序')}
                </span>
            );//从新设置相关信息
        }
        return (
            <div style={{height: '37px', lineHeight: '37px', padding: '0 15px', borderBottom: '1px solid #e2e2e2'}} title={item.name}>
                <span>{item.name}</span>
                {orderTypeComp}
            </div>
        );//定制化设置
    }

    //取消冒泡
    fnStopPropagation = (e) => {
        e.preventDefault && e.preventDefault();
        e.stopPropagation && e.stopPropagation();
    }

    /**
     * 右侧排序点击事件
     * @param e
     * @param item
     */
    fnClickOrderType = (event, item) => {
        try{
            this.fnStopPropagation(event);
        } catch (e) { }
        const {orderBySetStore} = this.props;
        const {initdata, updateInitData} = orderBySetStore;
        let ds = toJS(initdata);
        for (let i = 0  ; i < ds.length; i++) {//修改排序顺序
            if (ds[i].id == item.id) {
                ds[i].orderType = ds[i].orderType != '1' ? '1' : '0';
            }
        }
        updateInitData(ds);
    }

    fnSaveData(v) {
        const {orderBySetStore,onCancel, wfListDoingStore, dataKey} = this.props;
        const {initdata, selectedKeys} = orderBySetStore;
        let datas=[];

        selectedKeys.map(index=>{
            initdata.map(item=>{
                if(item.id == index) {
                    datas.push({...item,right:1,orderType:item.orderType== ''?"0":item.orderType});
                }
            }) ;
        })

        //发送保存请求，修改数据，
        WeaTools.callApi('/api/workflow/reqlist/doSaveData', 'POST', {datajson: JSON.stringify(datas), dataKey}).then(data=>{
            onCancel(false);
            if(data.stauts) {
                message.success(getLabel(22619,"保存成功"))
                wfListDoingStore.doSearch();
            } else {
                message.error(getLabel(22620, "保存失败")+","+getLabel(126690,"请联系管理员!"))
            }
        });
    }

    updateValue= (str, wy) => {
        const {orderBySetStore} = this.props;
        const {updateRightValue, updateLeftValue} = orderBySetStore;
        if (wy == "right") {
            updateRightValue(str);
        } else {
            updateLeftValue(str);
        }
    }
    fnclearnsearch=()=> {
        const {orderBySetStore} = this.props;
        const {updateRightValue,updateLeftValue,updateSelectedKeys,updateInitData} = orderBySetStore;
        updateLeftValue("");
        updateRightValue("");
    }

    render(){
        const {onCancel,orderBySetStore, dataKey} = this.props;
        const {initdata, selectedKeys, updateSelectedKeys,leftvalue,rightvalue} = orderBySetStore;
        const loading =   !(toJS(initdata).length>0);
        let buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pjq4by@save`} type="primary" onClick={(v) => {this.fnSaveData(v);this.fnclearnsearch()}}>{getLabel(86, "保存")}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9j7bc6@cancel`} type="ghost" onClick={() => {onCancel(false) ;this.fnclearnsearch()}}>{getLabel(201, "取消")}</Button>)
        ]
        return (
            <div  >
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xvafp5`}
                    onCancel={()=>{onCancel(false);this.fnclearnsearch()}}
                    visible={true}
                    title={getLabel(389339,`默认排序设置`)}
                    style={{width: 792, height: 490}}
                    buttons={buttons}
                    maskClosable={false}
                    hasScroll  >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@30duin`} spinning={loading}>
                    <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@kyq0ri`}
                        ref="myWeaTransferId"
                        className="portal-element-showfieldnew"
                        filterLeft={this.filterLeft}
                        filterRight={(items) =>this.filterRight(items)}
                        data={toJS(initdata)}
                        selectedKeys={toJS(selectedKeys)}
                        onChange={(keys, datas)=> updateSelectedKeys(keys)}
                        renderItem={ this.renderItem}

                        rightHeader={
                            <div style={{ position: 'relative'}}>
                                <span style={{paddingLeft: '15px'}}>{getLabel(83303, '已选')}</span>
                                <div style={{float:"right",width:"100px", marginRight: "10px"}}>
                                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@69aktu`} onSearchChange={lvalue => this.updateValue(lvalue, "right")} onSearch={lvalue => this.updateValue(lvalue, "right")}/></div></div>
                        }

                        //原始样式来源，可以基于本样式修改
                      /*  leftHeader= <div style={{display: 'inline-block', position: 'relative'}}><span style={{paddingLeft: '15px', position: 'absolute',
                        width: '100px', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'}}>{getLabel(83303, '已选')}</span><div style={{position: 'absolute',
                        top: '-25px',  width: '90px', left: '238px'}}><WeaInputSearch onSearch={(value)=>this.setState({rightSearchName: value})}/></div></div> */
                        leftHeader={<div style={{ position: 'relative'}}>
                            <span style={{paddingLeft: '15px'}}>{getLabel(83302, '待选')}</span>
                            <div style={{float:"right",width:"100px", marginRight: "10px"}}>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@97l2q9`} onSearchChange={lvalue => this.updateValue(lvalue, "left")} onSearch={lvalue =>  this.updateValue(lvalue, "left")}/></div></div>}
                    />
                    </Spin>
                </WeaDialog>
            </div>
        )
    }
}